<template>
  <div class="leftuppercontainer">
    <Card title="储存罐实时数据">
      <table border="0">
        <thead>
          <tr>
            <td class="color-font">储存罐名称</td>
            <td class="color-font">参数(单位)</td>
            <td class="color-font">实时数值</td>
          </tr>
        </thead>
        <tbody
          style="height: 350px; overflow: auto"
          @mouseenter="stopRotation"
          @mouseleave="startRotation"
        >
          <tr v-for="item in tableData">
            <td>{{ item.deviceName }}</td>
            <td>{{ `${item.param}(${item.unit})` }}</td>
            <td>{{ item.av }}</td>
          </tr>
        </tbody>
      </table>
    </Card>
  </div>
</template>
<script setup>
import { defineExpose, ref } from "vue";
import Card from "./Card.vue";
const tableData = ref([]);
const setData = (data) => {
  tableData.value = data;
  startRotation();
};
const timer = ref("");
const startRotation = () => {
  if (timer.value) {
    stopRotation();
  }
  timer.value = setInterval(() => {
    tableData.value.push(tableData.value[0]);
    tableData.value.shift();
  }, 1000);
};
const stopRotation = () => {
  clearInterval(timer.value);
};
defineExpose({
  setData,
});
</script>
<style lang="scss" scoped>
.leftuppercontainer {
  overflow: auto;
}
table {
  text-align: center;
  color: #fff;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

table tbody {
  display: block;
  font-size: 12px;
}

table thead,
tbody tr {
  display: table;
  width: 100%;
  margin: 10px 0;
  table-layout: fixed;
}

table tbody tr td {
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.color-font {
  color: #ffc916;
}

table thead {
  font-size: 12px;
}
</style>
